<template>
  <view class="order-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">缴费记录</text>
    </view>

    <!-- 缴费记录列表 -->
    <scroll-view
      class="list-container"
      scroll-y
      @scrolltolower="loadMore"
      :show-scrollbar="false"
    >
      <view v-for="(item, index) in paymentList" :key="index" class="list-item">
        <view class="item-left">
          <text class="amount">{{ item.amount }} 元</text>
          <text class="time">{{ formatTime(item.time) }}</text>
        </view>
        <view class="item-right">
          <text class="status" :class="item.status">{{ item.statusText }}</text>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <view v-if="loading" class="load-more">
        <text>加载中...</text>
      </view>
      <view v-else-if="noMore" class="load-more">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

// 缴费记录数据类型
interface PaymentItem {
  id: string;
  amount: number; // 缴费金额
  time: number; // 缴费时间（时间戳）
  status: "success" | "failed";
  statusText: string;
}

// 分页参数
const currentPage = ref(1);
const pageSize = 10;
const loading = ref(false);
const noMore = ref(false);

// 缴费记录列表
const paymentList = ref<PaymentItem[]>([]);

// 模拟数据生成
function generateMockData(page: number, size: number): PaymentItem[] {
  const mockStatus = ["success", "failed"];
  const data: PaymentItem[] = [];
  for (let i = 0; i < size; i++) {
    data.push({
      id: `pay-${page}-${i}`,
      amount: Math.floor(Math.random() * 1000) + 100, // 100-1099 元
      time: Date.now() - Math.floor(Math.random() * 30 * 24 * 3600 * 1000), // 30 天内随机时间
      status: mockStatus[Math.floor(Math.random() * 2)] as "success" | "failed",
      statusText: Math.random() > 0.5 ? "支付成功" : "支付失败",
    });
  }
  return data;
}

// 加载数据
function loadData() {
  if (loading.value || noMore.value) return;
  loading.value = true;

  // 模拟接口请求
  setTimeout(() => {
    const newData = generateMockData(currentPage.value, pageSize);
    if (newData.length < pageSize) {
      noMore.value = true;
    }
    paymentList.value = [...paymentList.value, ...newData];
    currentPage.value++;
    loading.value = false;
  }, 800);
}

// 上拉加载更多
function loadMore() {
  loadData();
}

// 格式化时间显示
function formatTime(timestamp: number): string {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
    .getHours()
    .toString()
    .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
}

// 初始化加载
onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.order-container {
  background-color: #f5f5f5;
  min-height: 100vh;

  .header {
    padding: 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .list-container {
    height: calc(100vh - 100rpx);
    padding: 20rpx;

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .item-left {
        .amount {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }

        .time {
          font-size: 26rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }

      .item-right {
        .status {
          font-size: 28rpx;
          padding: 8rpx 16rpx;
          border-radius: 20rpx;

          &.success {
            color: #67c23a;
            background-color: #f0f9eb;
          }

          &.failed {
            color: #f56c6c;
            background-color: #fef0f0;
          }
        }
      }
    }

    .load-more {
      text-align: center;
      padding: 30rpx;
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style>
